<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="关键字">
              <a-input v-model="queryParam.keywords" placeholder="搜索名称"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="queryParam.status" placeholder="请选择"
                        allowClear >
                <a-select-option value="1">未上传</a-select-option>
                <a-select-option value="2">解码中</a-select-option>
                <a-select-option value="3">待评分</a-select-option>
                <a-select-option value="4">已评分</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 6 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="onSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-dropdown v-if="selectedRowKeys.length > 0">
      </a-dropdown>
    </div>

    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="{ show: true, clear: () => { this.selectedRowKeys = [] } }"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <span slot="title1" slot-scope="text,record">
        <div style="margin-bottom: 10px;">{{record.name}}  </div>
        <div>
          <div >
            <a-badge status="default" v-if="record.status==1" text="未提交" />
            <a-badge status="default" v-if="record.status==2" text="解码中" />
            <a-badge status="processing" v-else-if="record.status==3" text="待评分" />
            <a-badge status="success" v-else-if="record.status==4" text="已评分" />
          </div>
        </div>
      </span>
      <span slot="student" slot-scope="text,record">
        <template >
        <div>
          {{record.student_name}} ({{record.student_code}})
        </div>
          </template>
      </span>
      <span slot="action" slot-scope="text,record">
        <template >
          <a @click="handleEdit(record)">评分</a>
        </template>
      </span>
    </s-table>
    <a-modal
            title="操作"
            :width="1000"
            style="top: 20px;"
            :bodyStyle="{maxHeight:'500px','overflowY':'scroll'}"
            v-model="visible"
            @ok="handleOk"
    >
      <a-spin :spinning="saveLoading">
        <a-card style="width: 900px;" v-if="formData.video1 && formData.video2">
          <a-row :gutter="20">
            <a-col :span="12" >
              <video width="400" controls="controls" id="video1" :src="formData.video1" >
                您的浏览器不支持 video 标签。
              </video>
            </a-col>
            <a-col :span="12" >
              <video width="400" controls="controls" id="video2" :src="formData.video2" >
                您的浏览器不支持 video 标签。
              </video>
            </a-col>
          </a-row>
          <div style="text-align: center">
            <a-button style="margin: 0 10px;" @click="videoPlay">开始播放</a-button>
            <a-button style="margin: 0 10px;"   @click="videoStop">停止</a-button>
            <a-button style="margin: 0 10px;"   @click="videoReset">重新播放</a-button>
          </div>
        </a-card>
        <a-form :form="form">
          <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="知识分"
                  hasFeedback
          >
            <a-rate  v-model='formData.score1'/>
          </a-form-item>
          <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="过程分"
                  hasFeedback
          >
            <a-rate  v-model='formData.score2'/>
          </a-form-item>
          <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="结果分"
                  hasFeedback
          >
            <a-rate  v-model='formData.score3'/>
          </a-form-item>
          <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="素质分"
                  hasFeedback
          >
            <a-rate  v-model='formData.score4'/>
          </a-form-item>
          <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="最终得分"
          >
            <a-input
                    type="number"
                    v-decorator="[
          'score',
          {rules: [{ required: true, message: '请输入最终得分' }]}
        ]"   placeholder="请输入最终得分"  />
          </a-form-item>
          <a-form-item
                  label="过程评价"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
          >
            <a-textarea rows="4" v-model="formData.note" placeholder="请输入过程评价"/>
          </a-form-item>
        </a-form>


      </a-spin>
      <template slot="footer">
        <a-button key="cancel" @click="handleCancel">取消</a-button>
        <a-button key="forward" :loading="saveLoading" type="primary" @click="handleOk">保存</a-button>
      </template>
    </a-modal>


    <a-modal
            title="订单记录"
            :width="1000"
            style="top: 20px;"
            :bodyStyle="{maxHeight:'500px','overflowY':'scroll'}"
            v-model="userVisible"
            @ok="userVisible=false"
    >
      <a-spin :spinning="saveLoading">
        <a-form :form="form">
          <a-table :columns="userColumns" :dataSource="guafenUserList" :pagination="userPagination"
                   @change="handleUserTableChange"
                   rowKey="id" :scroll="{ y: 300 }" bordered>
            <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm }" class='custom-filter-dropdown'>
              <a-input
                      v-model="userQuery.keywords"
                      placeholder="搜索用户名/手机号"
                      style="width: 188px; margin-bottom: 8px; display: block;"
              />
              <a-button
                      type='primary'
                      @click="userSearch(selectedKeys, confirm)"
                      icon="search"
                      size="small"
                      style="width: 90px; margin-right: 8px"
              >搜索</a-button>
              <a-button
                      @click="userSearchReset(selectedKeys, confirm)"
                      size="small"
                      style="width: 90px"
              >重置</a-button>
            </div>
            <span slot="name" slot-scope="text,record">
              {{record.user_name}}
            </span>
            <span slot="member_count" slot-scope="text,record">
              {{record.member_count}}
            </span>
            <span slot="pen_price" slot-scope="text,record">
              {{record.pen_price|price}}
            </span>
            <span slot="status" slot-scope="text,record">
            <a-badge status="processing" v-if="record.status==1" text="进行中" />
            <a-badge status="success" v-else-if="record.status==2" text="完成" />
            <a-badge status="error" v-else-if="record.status==3" text="过期失败" />
            </span>
            <span slot="time_start" slot-scope="text,record">
            开始:{{record.time_start|timeFormat}}<br/>
            结束:{{record.time_end|timeFormat}}
            </span>
          </a-table>
        </a-form>
      </a-spin>
    </a-modal>

  </a-card>
</template>

<script>
  import STable from '@/components/table/'
  import ATextarea from 'ant-design-vue/es/input/TextArea'
  import AInput from 'ant-design-vue/es/input/Input'
  import EditableCell from '@/components/EditableCell/'
  import RSwitch from '@/components/RSwitch/'
  import PicUploader from '@/components/PicUploader/'
  import moment from 'moment'
  import 'moment/locale/zh-cn';
  moment.locale('zh-cn');
  import { cateTreeList,exameList,exameAdd,videoScore,exameDelete,exameDetail,videoList,videoAdd,videoEdit,videoDelete,videoDetail ,studentOptions  } from '@/api/exame';
  export default {
    name: 'VideoList',
    components: {
      AInput,
      ATextarea,
      STable,
      EditableCell,
      RSwitch,
      PicUploader
    },
    data () {
      return {
        visible: false,
        saveLoading:false,
        userVisible:false,
        formData:{
          id:'',
          score1: 0,
          score2: 0,
          score3: 0,
          score4: 0,
          score: 0,
          note: 0,
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        form: this.$form.createForm(this),
        mdl: {},

        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {
          keywords:'',
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: 'id',
            width: '50px'
          },
          {
            title: '标题',
            dataIndex: 'title',
            scopedSlots: { customRender: 'title1' },
          },
          {
            title: '学生信息',
            dataIndex: 'student_name',
            scopedSlots: { customRender: 'student' },
          },
          {
            width:'250px',
            title: '提交时间',
            dataIndex: 'upload_time',
            customRender: (text) =>  {
              if(!text)return '-';
              return moment(text*1000).format('YYYY-MM-DD HH:mm:ss');
            }
          },
          {
            title: '评分时间',
            width:'250px',
            dataIndex: 'socre_time',
            customRender: (text) =>  {
              if(!text)return '-';
              return moment(text*1000).format('YYYY-MM-DD HH:mm:ss');
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '180px',
            scopedSlots: { customRender: 'action' },
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log('loadData');
          console.log(this.queryParam);
          this.queryParam = Object.assign(parameter, this.queryParam);
          return videoList(this.queryParam)
            .then(res => {
              console.log('res');
              return res.data
            })
        },

        selectedRowKeys: [],
        selectedRows: [],
        cateOptions:[],

        goodsOptions:[],
        youhuiquanOptions:[],
        //领取人员表头
        userColumns: [
        {
          title: '#',
          dataIndex: 'id',
          width: '100px'
        },
        {
          title: '发起人',
          dataIndex: 'user_name',
          width:'150px',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'name',
          }
        },
        {
          title: '人数',
          width:'100px',
          dataIndex: 'member_count',
          scopedSlots: {
            customRender: 'member_count',
          },
        },
        {
          title: '状态',
          width:'100px',
          dataIndex: 'status',
          scopedSlots: {
            customRender: 'status',
          },
          filters: [
            {
              text: '进行中',
              value: '1'
            },
            {
              text: '完成',
              value: '2'
            },
            {
              text: '过期失败',
              value: '3'
            }],
          filterMultiple:false,
        },
        {
          title: '时间',
          width:'150px',
          dataIndex: 'time_start',
          scopedSlots: {
            customRender: 'time_start',
          },
        },
      ],
        userPagination:{
      },
      userQuery:{
        guafenquan_id:0,
        status:0,
        page:1,
        keywords:undefined
      },
        studentOptions:[],
      guafenUserList:[]
      }
    },
    computed: {
    },
    created(){
    },
    mounted(){
      let that = this;
      that.getCateOptions();
      that.getStudentOptions();
    },
    methods: {
      moment,
      handleCancel(){
        this.visible = false
      },
      videoPlay(){
        var videoElement1 = document.getElementById("video1");
        var videoElement2 = document.getElementById("video2");
        videoElement1.play();
        videoElement2.play();
      },
      videoStop(){
        var videoElement1 = document.getElementById("video1");
        var videoElement2 = document.getElementById("video2");
        videoElement1.pause();
        videoElement2.pause();
      },
      videoReset(){
        var videoElement1 = document.getElementById("video1");
        var videoElement2 = document.getElementById("video2");
        videoElement1.pause();
        videoElement2.pause();
        videoElement1.currentTime=0;
        videoElement2.currentTime=0;
      },
      // 改
      handleEdit(record) {
        let self = this
        videoDetail({ id: record.id }).then(res => {
          setTimeout(()=>{
            self.form.setFieldsValue({ ...res.data })
          },1)
//          self.formData = {...res.data};
          self.formData = Object.assign(self.formData, res.data) //尼玛 日期选择器有bug 必须这样赋值
          self.formData.id = res.data.id;
        })
        this.visible = true
      },

      // 增改 处理
      handleOk(e) {
        let self = this;
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
            console.log('Received valuess of formData: ', self.formData)
            self.saveLoading = true;
            let formData = {
              id:self.formData.id,
              score1:self.formData.score1,
              score2:self.formData.score2,
              score3:self.formData.score3,
              score4:self.formData.score4,
              score:values.score,
              note:self.formData.note,
            };

            videoScore(formData).then(res => {
              self.$message.success('提交成功')
              self.$refs.table.refresh(true)
              self.visible = false;
              self.saveLoading = false;
            }).catch(err =>{
              self.$message.error(err.data.msg);
              self.saveLoading = false;
            })
          }
        })
      },
    // 查
    onSearch() {
      let self = this;
      self.$refs.table.refresh(true)
    },
      setAllStatus(status){
        let self = this;
        setGuafenAllStatus({
          ids:self.selectedRowKeys,
          status:status,
        })
                .then(res => {
                  self.$message.success('设置成功')
                  self.$refs.table.refresh(true)
                })
      },
     // 删
      deleteHandle(record) {
        let self = this
        deleteGuafen({ id: record.id }).then(res => {
          self.$message.success('删除成功')
          self.$refs.table.refresh(true)
      }).catch(err =>{
          self.$message.error(err.data.msg)
        })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      getCateOptions(){
        let that = this;
        cateTreeList()
                .then(res => {
                  that.cateOptions =  res.data;
                })
      },
      getStudentOptions(){
        let that = this;
        studentOptions()
                .then(res => {
                  res.data.map(item =>{
                    item.id =  item.id+'';
                  })
                  that.studentOptions =  res.data;
                })
      },
    handleUserManage(record) {
        let self = this
        self.userQuery.guafenquan_id = record.id;
        self.userQuery.keywords = undefined;
        self.userQuery.status = undefined;
        self.userPagination.page = 1;
        self.fetchUserList();
        this.userVisible = true
      },

      fetchUserList(){
        let self = this
        getGuafenUserList(Object.assign(self.userQuery,self.userPagination)).then(res => {
          self.guafenUserList = res.data.list
          self.userPagination.total = res.data.total
        })
      },

      userSearch(selectedKeys,confirm){
        let self = this
        confirm();
        self.fetchUserList();
      },
      userSearchReset(selectedKeys,confirm){
        let self = this;
        confirm();
        self.userQuery.keywords = undefined;
        self.fetchUserList();
      },
      handleUserTableChange(pagination, filters, sorter) {
        console.log('filters',filters);
        let that = this;
        if(filters.status){
          that.userQuery.status = filters.status[0];
        }else{
          that.userQuery.status = 0;
        }
        const pager = { ...this.pagination };
        pager.current = pagination.current;
        that.pagination = pager;
        that.userQuery.page = pagination.current;
        that.fetchUserList();
      },

    },
    watch: {
      /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
    }
  }
</script>


<style scoped>
  .custom-filter-dropdown {
    padding: 8px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  }

  .highlight {
    background-color: rgb(255, 192, 105);
    padding: 0px;
  }
</style>